<!-- activityBottomPopup.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>活动底部弹窗</title>
    <style type="text/css">
    	html{
    		background-color: rgba(0,0,0,0);
    	}
    	body{
    		background-color: rgba(0,0,0,0);
    		margin: 0;
    	}
    	p{
    		margin: 0;
    		color: #333;
    	}
    	.bottom-div{
    		background-color: white;
    		height: 200px;
    		width: 100%;
    		position: absolute;
    		bottom: 0;
    		left: 0;
    	}
    	.activity-name-div{
    		border: none;
		    background-size: 100% 1px;
		    background-repeat: no-repeat;
		    background-position: bottom;
		    background-image: linear-gradient(0,#dddddd,#dddddd 50%,transparent 50%);
		    background-image: -webkit-linear-gradient(90deg,#dddddd,#dddddd 50%,transparent 50%);
		    height: 24px;
		    padding: 10px;
    	}
    	.activity-name-p{
    		font-size: 16px;
    		text-align: center;
    		height: 24px;
    	}
    	.activity-content-div{
    		height: 112px;
    	}
    	.activity-cancel-div{
    		border: none;
		    background-size: 100% 1px;
		    background-repeat: no-repeat;
		    background-position: top;
		    background-image: linear-gradient(0,#dddddd,#dddddd 50%,transparent 50%);
		    background-image: -webkit-linear-gradient(90deg,#dddddd,#dddddd 50%,transparent 50%);
		    height: 24px;
		    padding: 10px;
    	}
    	.activity-content-div .content-sub-div{
    		width: 33.3%;
    		height: 100%;
    	}
    	.activity-content-div .content-sub-div-left{
    		float: left;
    	}
    	.activity-content-div .content-sub-div-right{
    		float: right;
    	}
    	.activity-content-div .content-sub-div-center{
    		margin-left: 33.3%;
    	}
    	.activity-content-div .content-img-div{
    		width: 100%;
    		height: 60px;
    		text-align: center;
    	}
		.activity-content-div .content-title-div{
			width: 100%;
			height: 32px;
			text-align: center;
		}
		.activity-content-div .content-img{
			width: 60px;
			height: 60px;
		}
		.activity-content-div .content-title{
			height: 100%;
			font-size: 14px;
			line-height: 32px;
		}
		.content-bg-div{
			padding: 10px;
		}
		.background-div{
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,0.5);
		}
    </style>
</head>
<body>
	<div id="background_div" index="0" class="background-div tap-response"></div>
	<div class="bottom-div">
		<div class="activity-name-div">
			<p id="top_title" class="activity-name-p">
				提示
			</p>
		</div>
		<div class="activity-content-div">
			<div id="tag1" index="1" class="content-sub-div content-sub-div-left tap-response">
				<div class="content-bg-div">
					<div class="content-img-div">
						<img id="img1" class="content-img" src="../../image/icon_activity_del_normal.png">
					</div>
					<div class="content-title-div">
						<p id="title1" class="content-title">
							删除
						</p>
					</div>
				</div>
			</div>
			<div id="tag3" index="3" class="content-sub-div content-sub-div-right tap-response">
				<div class="content-bg-div">
					<div class="content-img-div">
						<img id="img3" class="content-img" src="../../image/icon_activity_start.png">
					</div>
					<div class="content-title-div">
						<p id="title3" class="content-title">
							开始
						</p>
					</div>
				</div>
			</div>
			<div id="tag2" index="2" class="content-sub-div content-sub-div-center tap-response">
				<div class="content-bg-div">
					<div class="content-img-div">
						<img id="img2" class="content-img" src="../../image/icon_activity_edit.png">
					</div>
					<div class="content-title-div">
						<p id="title2" class="content-title">
							编辑
						</p>
					</div>
				</div>
			</div>
		</div>
		<div index="4" class="activity-cancel-div tap-response">
			<p class="activity-name-p">
				取消
			</p>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript">
	apiready = function(){
		prepareData();
		setPageClick();    
	}
	//准备数据
	function prepareData(){
		var pageParam = api.pageParam;
		var topTitle = pageParam.topTitle;
		if (topTitle != null) {
			$('#top_title').text(topTitle);
		}
		setupPupopModel(pageParam.pTag1, 1);
		setupPupopModel(pageParam.pTag2, 2);
		setupPupopModel(pageParam.pTag3, 3);
	}
	//设置弹窗模型
	function setupPupopModel(pTag, index){
		if (pTag != null) {
			if (pTag.imgUrl != null) {
				$('#img'+index).attr('src', pTag.imgUrl);
			}
			if (pTag.title != null){
				$('#title'+index).text(pTag.title);
			}
			if (pTag.textcolor != null) {
				$('#title'+index).attr("style", "color:"+pTag.textcolor);
			}
		}
	}
	//设置点击事件
	function setPageClick(){
		$('.tap-response').click(function(){
			var tag = parseInt($(this).attr('index'));
			switch(tag){
				case 0:
					api.closeFrame();
				case 4:
					api.closeFrame();
				default :
					sendMessage(tag);
			}
		});
	}  
	//发送消息通知
	function sendMessage(tag){
		api.sendEvent({
		    name: 'activityBottomPopupNotifi',
		    extra: {
		        tag: tag
		    }
		});
	}
</script>
</html>